<template>
  <!-- 事件修饰符 -->
  <div>
    <p v-html="flag"></p>
    <!-- .prevent 阻止默认行为 -->
    <button @click.prevent="flag += 1">阻止默认行为</button>
    <!-- .stop阻止事件冒泡 比如内部盒子设置了点击事件，点击后它父盒子爷爷盒子都会执行点击事件 -->
    <button @click.stop="flag += 1">阻止事件冒泡</button>

    <p v-html="value"></p>
    <input type="text" :placeholder="value" @change="word" v-model="values" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      value: "",

      values: "",
    };
  },
  methods: {
    word() {
      this.value = this.values;
    },
  },
};
</script>

<style>
</style>